<script>
import jInput from './config/jInputConfig.vue'
import jUpload from './config/jUploadConfig.vue'
import elRow from './config/jRowConfig.vue'
import select from './config/jSelect.vue'
import dataPicker from './config/jDataPicker.vue'
import {h,toRefs, resolveComponent} from "vue";

export default {
    name: "atomConfig",
    props: {
        obj: Object
    },
    components: {jInput, jUpload, elRow, select, dataPicker},
    setup(props) {
        let {obj} = toRefs(props)
        return () => h(
            resolveComponent('el-form'), {model: obj.value}, () => [
                h(resolveComponent('el-form-item'), {label: '组件名称'}, () => [
                    h(resolveComponent('el-input'), {
                        modelValue: obj.value.title,
                        "onUpdate:modelValue": (e) => obj.value.title = e
                    })
                ]),
                h(resolveComponent('el-form-item'), {label: '绑定字段'}, () => [
                    h(resolveComponent('el-input'), {
                        modelValue: obj.value.field,
                        "onUpdate:modelValue": (e) => obj.value.field = e
                    })
                ]),
                h(resolveComponent('el-form-item'), {label: '栅格'}, () => [
                    h(resolveComponent('el-slider'), {
                        showStops: true,
                        min: 0,
                        max: 24,
                        modelValue: obj.value.props.span,
                        "onUpdate:modelValue": (e) => obj.value.props.span = e
                    })
                ]),
                h(resolveComponent('el-form-item'), {label: '必填'}, () => [
                    h(resolveComponent('el-switch'), {
                        modelValue: obj.value.valid,
                        "onUpdate:modelValue": (e) => obj.value.valid = e
                    })
                ]),
                h(resolveComponent(obj.value.type),{obj: obj.value})
            ]
        )
    }
}
</script>

<style scoped>

</style>
